<template>
  <section id="records">
    <ul class="title">
      <li :class="tabIndex === 0 ? 'active' : ''" @click="switchRecord(0)" :disabled="!user">当前持仓</li>
      <li :class="tabIndex === 1 ? 'active' : ''" @click="switchRecord(1)" :disabled="!user">挂单记录</li>
      <li :class="tabIndex === 2 ? 'active' : ''" @click="switchRecord(2)" :disabled="!user">历史记录</li>
    </ul>
    <div class="content" v-if="user && tabIndex===0">
        <Position></Position>
    </div>
    <div class="content" v-if="user && tabIndex===1">
        <Pending></Pending>
    </div>
    <div class="content" v-if="user && tabIndex===2">
     <table >
        <thead>
          <tr>
            <th>时间</th>
            <th>产品</th>
            <th>手数 (方向)</th>
            <th>开仓价格</th>
            <th>平仓价格</th>
            <th>利息</th>
            <th>平仓时间</th>
            <th>订单号</th>
            <th>盈亏</th>
          </tr>
        </thead>
        <tbody v-if="ddDataList&&ddDataList.data&&ddDataList.data.length">
          <tr v-for="(item,index) in ddDataList.data" :key="index">
            <td>{{$js.timeToDate(item.time)}}</td>
            <td>{{item.goods_name}}</td>
            <td>{{item.num}}手 / {{item.buy_type==1?'买入':'卖出'}}</td>
            <td>{{item.price}}</td>
            <td>{{item.end_price}}</td>
            <td>{{item.interest}}</td>
            <td>{{$js.timeToDate(item.create_time)}}</td>
            <td>{{item.order_id}}</td>
            <td  :class="item.yingkui>=0?'red':'green'">{{(item.yingkui>=0?'+':'')+item.yingkui}}</td>
          </tr>
        </tbody>
      </table>
      <p class="more" v-if="ddDataList&&ddDataList.pages>1"> <span @click="$router.push('/order/history')">查看更多<img src="@/assets/image/icon_xiala.png" alt="xl"></span> </p>
       <base-nodata v-if="!(ddDataList&&ddDataList.data&&ddDataList.data.length)"></base-nodata>
    </div>
    <Base-nodata v-if="!user"></Base-nodata>
     <base-alert :bol.sync="alertBol"  :type.sync="alertType"></base-alert>
  </section>
</template>
<script>

import Position from '@/views/order/Position.vue'
import Pending from '@/views/order/Pending.vue'
import { constants } from 'fs';
export default {
  data() {
    return {
      tabIndex:0, // 0 当前持仓 1 挂单记录 2 历史记录
      page:1,//历史记录页数
      alertBol:false,
      alertType:2,
    }
  },
  components:{
    Position,
    Pending
  },
  watch:{
    tabIndex(){
      switch(this.tabIndex){
        case 2:this.$store.getters.countDdDataList; break;
      }
    }
  },
  computed:{
    user() {
      //是否登录
      var user = this.$store.state.user;
      return user;
    },
    ddDataList(){
      return this.$store.state.ddDataList;
    }
   
    
  },
  methods: {
     //更改弹窗
    alterChoose(type){
         this.alertType=type;
         this.alertBol=true;
     },
    /**
     * 切换记录
     */
    switchRecord(index) {
      let _self = this;
      if (!_self.user) {
       this.alterChoose(2)
        return;
      }
      _self.tabIndex = index;
    },
  }
  
}
</script>
